前言

這一章主要會說明 Router Navigation Events 與 Router Lifecycle Hooks 之間的時序關係。從 Angular 應用程式中點擊一個連結，一步步解析 Router 的內部機制。

• Router Navigation Events 是「系統層面」的事件流
  • Router 主動發出的進度通知，告訴你「現在正在做什麼」
  • 開發者可以監聽這些事件來更新 UI 狀態或追蹤使用者行為
  • 屬於被動接收的資訊，無法改變導航流程
• Router Lifecycle Hooks 是「業務邏輯層面」的控制機制
  • 開發者定義的檢查或資料載入函數，Router 會在特定時機呼叫
  • 回傳結果會直接影響導航是否繼續執行
  • 屬於主動控制的邏輯，決定應用程式的行為

簡單來說，Events 是 Router 告訴你發生什麼，Hooks 是你告訴 Router 該做什麼。在接下來的流程解析中，你會看到這兩者如何在導航過程中密切配合，共同完成從點擊連結到頁面載入的完整旅程。

🎬 導航生命週期全貌

當使用者點擊了連結，在短短幾百毫秒內，Angular Router 會執行一系列精密的步驟：

在這張流程圖中：

• 📢 Navigation Events：Router 系統發出的進度通知
• 🛡️ Lifecycle Hooks：開發者定義的檢查與資料準備機制

第一階段：啟動導航（NavigationStart）

當使用者點擊連結或呼叫 router.navigate() 時，導航生命週期正式開始。

<a routerLink="/profile">個人資料</a>

this.router.navigate(['/profile']);

NavigationStart 事件會立即發出，包含以下資訊：

• id：這次導航的唯一識別碼
• url：目標 URL
• navigationTrigger：觸發原因（點擊、程式碼、瀏覽器前進/後退等）

第二階段：路由識別（RoutesRecognized）

Router 分析 URL，找到對應的路由並處理重定向。當發出 RoutesRecognized 事件，表示 Router 已經：

• 找到匹配的路由配置
• 知道要載入哪個組件
• 確定需要執行的守衛與 Resolver

第三階段：守衛檢查（Guards Phase）

Router 會依序執行不同類型的守衛，確保導航的安全性和正確性。

執行順序

1. canDeactivate

   檢查是否允許離開目前的頁面。

2. canLoad（僅限懶加載模組）

   檢查是否允許載入新的功能模組。

   • canLoad 在 Angular 15+ 已被標記為 deprecated
   • 建議使用 canMatch 替代

3. canActivate / canActivateChild

   檢查是否允許進入目標路由。

⚠️ 注意：canLoad 只在 懶加載模組 的情況下執行；非懶加載路由不會觸發。

第四階段：資料解析（Resolve Phase）

通過守衛後，Router 執行 resolve() 以準備資料。

此時會依序觸發 ResolveStart → resolver → ResolveEnd。

Resolver 的好處：

• 避免畫面閃爍（資料先載入再顯示）
• 可以集中處理錯誤與快取

第五階段：組件啟動（Activation Phase）

在 ActivationStart 與 ActivationEnd 之間，Angular 會：

1. 建立組件實例
2. 執行依賴注入
3. 呼叫 constructor、ngOnInit
4. 渲染模板

第六階段：導航完成與例外狀況

成功導航

若一切順利，發出 NavigationEnd 事件，表示導航完成。

導航被取消

若守衛回傳 false 或 UrlTree，Router 會中止導航並發出 NavigationCancel。

發生錯誤

若 resolver、守衛或其他流程拋出錯誤，則會發出 NavigationError。

被跳過

當導航到相同的 URL 且 onSameUrlNavigation 設為 'ignore' 時，發出 NavigationSkipped（Angular 15+ 新增）。

🎯 掌握生命週期的實際價值

理解 Angular Router 的完整生命週期能幫助你：

1. 優化使用者體驗
   • 在適當時機顯示載入指示器
   • 提供具體的進度提示
2. 調試導航問題
   • 快速定位卡住的原因
   • 追蹤守衛與 resolver 的執行情況
3. 實作進階功能
   • 動態權限控制
   • 頁面瀏覽追蹤
   • 智能快取與資料預載

總結

Angular Router 的導航生命週期是一個 安全、高效且可控 的流程。

透過理解與掌握它，你可以：

• 🎯 精確控制每個導航階段的行為
• 📊 即時追蹤導航進度與狀態
• 🛡️ 全面提升應用程式的安全性
• ⚡ 最佳化效能與使用者體驗